<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div id="hello-vue" class="demo">
        {{ message }}
      </div>
      <div id="counter" class="demo">
        Counter: {{ counter }}
      </div>
      <div id="bind-attribute" class="demo">
        <span v-bind:title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
      </div>
      <div id="event-handling" class="demo">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转 Message</button>
      </div>
      <div id="two-way-binding" class="demo">
        <p>{{ message }}</p>
        <input v-model="message" @input="debouncedInput"/>
      </div>
      <div id="conditional-rendering" class="demo">
        <span v-if="seen">现在你看到我了</span>
      </div>
      <div id="list-rendering" class="demo">
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
      </div>
      <div id="computed-basics" class="demo">
        <p>Has published books:</p>
        <span>{{ publishedBooksMessage }}</span>
        <p>Date.now()</p>
        <span>{{ now }}</span>
      </div>
      <script src="vue.3.2.20.js"></script>
      <script src="lodash.4.17.20.min.js"></script>
<script>
const HelloVueApp = {
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
const Counter = {
    data() {
        return {
            counter: 1
        }
    },
    mounted() {
        setInterval(() => {
            this.counter++
        }, 1000)
    }
}

Vue.createApp(Counter).mount('#counter')

const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')

const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')

const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue 123!'
    }
  },
  created() {
    // 用 Lodash 的防抖函数
    this.debouncedInput = _.debounce(this.input, 1000)
  },
  methods: {
    input() {
      console.log(this.message);
    }
  },
  watch: {
    message(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`);
    }
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedInput.cancel()
  }
}

const TwoWayBindingVm = Vue.createApp(TwoWayBinding).mount('#two-way-binding')

const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}

Vue.createApp(ListRendering).mount('#list-rendering')

const ComputedBasics = {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    },
    now() {
        return Date.now()
    }
  }
}

Vue.createApp(ComputedBasics).mount('#computed-basics')
</script>
</body>
</html>